সিএসএস(৩) এনিমেশন
আপনি জাভাস্ক্রিপ্ট ব্যবহার করা ছাড়া অধিকাংশ এইচটিএমএল এলিমেন্টকে সিএসএস(৩) এনিমেশন দ্বারা প্রাণবন্ত করে তুলতে পারেন।
এনিমেশন
Animation
সিএসএস(৩) এনিমেশন প্রোপার্টি
নিচের টেবিলে @keyframes এবং সকল এনিমেশন প্রোপার্টি গুলো দেওয়া হলোঃ
এনিমেশন কি?
এনিমেশন দ্বারা একটি এলিমেন্টকে এক স্টাইল থেকে অন্য স্টাইলে পরিবর্তন করা যায়। আপনি আপনার ইচ্ছে মত প্রোপার্টিকে যতবার চাইবেন ততবার পরিবর্তন করতে পারবেন।
সিএসএস(৩) এনিমেশন ব্যবহার করতে হলে এনিমেশনের জন্য প্রথমে আপনাকে কিছু প্রোপার্টি নির্দিষ্ট করে দিতে হবে। আর এই প্রোপার্টি গুলো keyframes এর মধ্যে রাখতে হবে। যা পরবর্তিতে এনিমেশন ঘটার সময় আপনার এলিমেন্ট গুলোর স্টাইল পরিবর্তন করবে।
@keyframes এর নিয়ম
কোনো এলিমেন্টে এনিমেশন করতে হলে এর স্টাইল গুলো পরিবর্তন করতে হয়। আর এই পরিবর্তিত স্টাইল গুলো আমরা @keyframes এর ভিতর নির্দিষ্ট করে দিব। আর এই স্টাইল গুলোই এনিমেশনের সময় কাজ করবে।
@keyframes দ্বারা তৈরি এনিমেশনকে কাযে লাগাতে হলে আপনাকে অবশ্যই এটিকে animation প্রোপার্টি দ্বারা যে কোনো এলিমেন্টের সাথে বাইন্ড করতে হবে।
নিচের উদাহরণে দেখা যাবে এনিমেশনটিকে একটি <div> এলিমেন্টের সাথে বাইন্ড করা হয়েছে। এই এনিমেশনটি ৪ সেকেন্ডের যেখানে <div> এলিমেন্টির ব্যাকগ্রাউন্ড কালার লাল থেকে ধীরে ধীরে হলুদ কালারে পরিবর্তন হতে দেখা যাবেঃ
সিএসএস৩ অ্যানিমেশন (CSS3 Animation) - Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: teal;
animation-name: example;
-webkit-animation-name: example; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
-webkit-animation-duration: 4s; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {background-color: maroon;}
to {background-color: orangered;}
}
/* গুগল ক্রম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes example {
from {background-color: maroon;}
to {background-color: orangrred;}
}
</style>
</head>
<body>
<p> এনিমেশন ইফেক্ট দেখতে পেজ রিলোড করুন</p>
<div></div>
<p><b>নোট:</b>এনিমেশন শেষ হওয়ার পর এটি আবার পূর্বের স্টাইলে ফিরে যায়।</p>
</body>
</html>
সর্তকতাঃ যদি animation-duration প্রোপার্টি ব্যবহার করা না হয় তবে এনিমেশনটির কোন প্রভাব থাকবেনা। কারণ এটির ডিফল্ট মান 0 থাকে।
উপরের উদাহরণে আমরা @keyframes এর মধ্যে "from" এবং "to" এই দুইটি কীওয়ার্ড দ্বারা এনিমেশনটি ডিফাইন করেছিলাম। এছাড়াও আমরা শতকরা(%) হারে এনিমেশনের মান ডিফাইন করতে পারি। এক্ষেত্রে এনিমেশনটি 0% থেকে শুরু করবে এবং 100% এ সম্পূর্ণ করবে।
শতকরা(%) ব্যবহার করে আপনি অনেক জটিল এবং কঠিন এনিমেশন তৈরি করতে পারেন।
নিম্নের উদাহরণে < div> এলিমেন্টি এনিমেশন চলাকালীন অবস্থায় ৪টি ব্যাকগ্রাউন্ড কালার পরিবর্তন করবেঃ
সিএসএস৩ অ্যানিমেশন (CSS3 Animation) - Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: maroon;
-webkit-animation-name: example; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
-webkit-animation-duration: 4s; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color: red;}
25% {background-color: green;}
50% {background-color: teal;}
100% {background-color: orangered;}
}
/* গুগল ক্রম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes example {
0% {background-color: red;}
25% {background-color: green;}
50% {background-color: teal;}
100% {background-color: orangered;}
}
</style>
</head>
<body>
<p> এনিমেশন ইফেক্ট দেখতে পেজ রিলোড করুন</p>
<div></div>
</body>
</html>
নিম্নের উদাহরণে < div> এলিমেন্টি এনিমেশনের সময় শতকরা(%) মান অনুযাই ব্যাকগ্রাউন্ড কালার এবং অবস্থান উভয় পরিবর্তন হবেঃ
সিএসএস৩ অ্যানিমেশন (CSS3 Animation) - Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: maroon;
position: relative;
-webkit-animation-name: example; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
-webkit-animation-duration: 4s; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
animation-name: example;
animation-duration: 4s;
}
/* গুগল ক্রম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes example {
0% {background-color:orangered; left:0px; top:0px;}
25% {background-color:grey; left:200px; top:0px;}
50% {background-color:teal; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
@keyframes example {
0% {background-color:orangered; left:0px; top:0px;}
25% {background-color:grey; left:200px; top:0px;}
50% {background-color:teal; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p> এনিমেশন ইফেক্ট দেখতে পেজ রিলোড করুন</p>
<div></div>
</body>
</html>
বিলম্ব(Delay) এনিমেশন
animation-delay প্রোপার্টি নির্দেশ করে যে এনিমেশনটি কত সময়-কাল পর শুরু হবে।
নিচের উদাহরণে এনিমেশনটি শুরু হতে ২ সেকেন্ড বিলম্ব করবেঃ
সিএসএস৩ অ্যানিমেশন (CSS3 Animation) - Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: maroon;
position: relative;
-webkit-animation-name: example; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
-webkit-animation-duration: 4s; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
/* গুগল ক্রম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes example {
0% {background-color:orangered; left:0px; top:0px;}
25% {background-color:grey; left:200px; top:0px;}
50% {background-color:teal; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
@keyframes example {
0% {background-color:orangered; left:0px; top:0px;}
25% {background-color:grey; left:200px; top:0px;}
50% {background-color:teal; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p> এনিমেশন ইফেক্ট দেখতে পেজ রিলোড করুন</p>
<div></div>
</body>
</html>
এনিমেশন পুনরাবৃত্তি
animation-iteration-count প্রোপার্টি একটি এনিমেশন কতবার চলবে তা নির্দেশ করে।
নিম্নের উদাহরণে এনিমেশনটি ৩ বার চলার পর বন্ধ হবেঃ
সিএসএস৩ অ্যানিমেশন (CSS3 Animation) - Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: maroon;
position: relative;
-webkit-animation-name: example; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
-webkit-animation-duration: 4s; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
/* গুগল ক্রম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes example {
0% {background-color:orangered; left:0px; top:0px;}
25% {background-color:grey; left:200px; top:0px;}
50% {background-color:teal; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
@keyframes example {
0% {background-color:orangered; left:0px; top:0px;}
25% {background-color:grey; left:200px; top:0px;}
50% {background-color:teal; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p> এনিমেশন ইফেক্ট দেখতে পেজ রিলোড করুন</p>
<div></div>
</body>
</html>
নিম্নের উদাহরণে এনিমেশনটি সব-সময় চলতে থাকবে। আর এর জন্য animation-iteration-count প্রোপার্টি ভ্যালু "infinite" সেট করা হয়েছেঃ
সিএসএস৩ অ্যানিমেশন (CSS3 Animation) - Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: maroon;
position: relative;
-webkit-animation-name: example; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
-webkit-animation-duration: 4s; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
-webkit-animation-iteration-count: infinite; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
/* গুগল ক্রম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes example {
0% {background-color:orangered; left:0px; top:0px;}
25% {background-color:grey; left:200px; top:0px;}
50% {background-color:teal; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
@keyframes example {
0% {background-color:orangered; left:0px; top:0px;}
25% {background-color:grey; left:200px; top:0px;}
50% {background-color:teal; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p> এনিমেশন ইফেক্ট দেখতে পেজ রিলোড করুন</p>
<div></div>
</body>
</html>
এনিমেশন বিপরীত দিক
কোনো এনিমেশনকে বিপরীত দিক হতে চালু করার জন্য animation-direction প্রোপার্টি ব্যবহার করা হয়।
নিম্নের উদাহরণে এনিমেশনটিকে বিপরীত দিক হতে চালু করা হলোঃ
সিএসএস৩ অ্যানিমেশন (CSS3 Animation) - Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: maroon;
position: relative;
-webkit-animation-name: example; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
-webkit-animation-duration: 4s; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
-webkit-animation-iteration-count: 3; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: reverse;
}
/* গুগল ক্রম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes example {
0% {background-color:orangered; left:0px; top:0px;}
25% {background-color:grey; left:200px; top:0px;}
50% {background-color:teal; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
@keyframes example {
0% {background-color:orangered; left:0px; top:0px;}
25% {background-color:grey; left:200px; top:0px;}
50% {background-color:teal; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p> এনিমেশন ইফেক্ট দেখতে পেজ রিলোড করুন</p>
<div></div>
</body>
</html>
নিম্নের উদাহরণে এনিমেশনটিকে প্রথমে সামনের দিকে তারপর বিপরীত দিকে আবার সামনের দিকে চালু করার জন্য animation-direction প্রোপার্টি ভ্যালু "alternate" সেট করা হয়েছেঃ
সিএসএস৩ অ্যানিমেশন (CSS3 Animation) - Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: maroon;
position: relative;
-webkit-animation-name: example; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
-webkit-animation-duration: 4s; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
-webkit-animation-iteration-count: 3; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: alternate;
}
/* গুগল ক্রম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes example {
0% {background-color:orangered; left:0px; top:0px;}
25% {background-color:grey; left:200px; top:0px;}
50% {background-color:teal; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
@keyframes example {
0% {background-color:orangered; left:0px; top:0px;}
25% {background-color:grey; left:200px; top:0px;}
50% {background-color:teal; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p> এনিমেশন ইফেক্ট দেখতে পেজ রিলোড করুন</p>
<div></div>
</body>
</html>
এনিমেশনের বক্ররেখা গতিবিধি
এনিমেশনের বক্ররেখা গতি নিয়ন্ত্রন করার জন্য animation-timing-function প্রোপার্টি ব্যবহার করা হয়।
animation-timing-function প্রোপার্টির ভ্যালু গুলো নিম্নের দেওয়া হলোঃ
ease- এনিমেশনটি ধীরে ধীরে শুরু হয়ে তারপর দ্রুত চলবে এবং আবার ধীরে ধীরে শেষ হবে। এটি ডিফল্ট।linear- এনিমেশনটি একই গতিতে শুরু হবে এবং শেষ হবে।ease-in- এনিমেশনটি ধীর গতিতে শুরু হবে।ease-out- এনিমেশনটি ধীর গতিতে শেষ হবে।ease-in-out- এনিমেশনটি ধীর গতিতে শুরু এবং শেষ হবে।cubic-bezier(n,n,n,n)- এই ফাংশনের মাধ্যমে আপনার ইচ্ছেমত ভ্যালু নির্দিষ্ট করে দিতে পারেন।
নিচের উদাহরণে এনিমেশনের কিছু ভিন্ন ভিন্ন গতিবিধি দেখানো হলোঃ
এনিমেশন সংক্ষিত্ত প্রোপার্টি
নিম্নের উদাহরনে ছয়টি প্রোপার্টির ব্যবহার একত্রে দেখানো হয়েছেঃ
সিএসএস৩ অ্যানিমেশন (CSS3 Animation) - Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 50px;
background-color: teal;
color: whitesmoke;
font-weight: bold;
position: relative;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রম, অপেরা ও সাফারির জন্য */
#linear {-webkit-animation-timing-function: linear;}
#ease {-webkit-animation-timing-function: ease;}
#ease-in {-webkit-animation-timing-function: ease-in;}
#ease-out {-webkit-animation-timing-function: ease-out;}
#ease-in-out {-webkit-animation-timing-function: ease-in-out;}
#linear {animation-timing-function: linear;}
#ease {animation-timing-function: ease;}
#ease-in {animation-timing-function: ease-in;}
#ease-out {animation-timing-function: ease-out;}
#ease-in-out {animation-timing-function: ease-in-out;}
/* গুগল ক্রম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
from {left: 0px;}
to {left: 300px;}
}
@keyframes mymove {
from {left: 0px;}
to {left: 300px;}
}100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p> এনিমেশন ইফেক্ট দেখতে পেজ রিলোড করুন</p>
<div></div>
</body>
</html>
সংক্ষিত্ত প্রোপার্টি animation ব্যবহার করে উপরের এনিমেশন এর মতোই ইফেক্ট পাওয়া যায়ঃ
সিএসএস৩ অ্যানিমেশন (CSS3 Animation) - Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: maroon;
position: relative;
-webkit-animation: example 5s linear 2s infinite alternate; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
animation: example 5s linear 2s infinite alternate;
}
/* গুগল ক্রম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes example {
0% {background-color:orangered; left:0px; top:0px;}
25% {background-color:grey; left:200px; top:0px;}
50% {background-color:teal; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
@keyframes example {
0% {background-color:orangered; left:0px; top:0px;}
25% {background-color:grey; left:200px; top:0px;}
50% {background-color:teal; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p> এনিমেশন ইফেক্ট দেখতে পেজ রিলোড করুন</p>
<div></div>
</body>
</html>
বিশেষ দ্রষ্টব্যঃ উপরের উদাহরণগুলো ইন্টারনেট এক্সপ্লোরার ৯ এবং তার পূর্বের ভার্সনে কাজ করে না
Read more
